<template>
  <div>
    <div class="row">
      <div class="col-2">
        <div class="mt-5">
          <div class="list-group word-width" v-for="(item, index) in dataMsg.content">
            <button type="button" class="text-center list-group-item list-group-item-action" v-bind:class="index===idx?'active':''" @click="changeIndex(index)">
              {{item.title}}
            </button>
          </div>
        </div>
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>{{dataMsg.title}}</p>
          <small class="text-muted font-italic">{{dataMsg.author}}</small>
        </h3>
        <div v-for="item in subDataMsg.content">
          <h5 class="text-center mb-3 font-weight-bold word-width">
            <small class="text-muted font-italic">{{item.chapter}}</small>
          </h5>
          <ul class="list-unstyled text-small text-center word-width">
            <li v-for="itm in item.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'YouXueQiongLin',
    data () {
      return {
        idx: -1,
        subDataMsg: [],
        dataMsg: {
          'title': '幼學瓊林',
          'author': '程登吉',
          'abstract': '《幼學瓊林》是中國古代兒童的啓蒙讀物，作者程允升。《幼學瓊林》初爲明代西昌人程登吉（字允升）編著，本名《幼學須知》，又稱《成語考》、《故事尋源》，清人鄒聖脈作了增補，改名爲《幼學瓊林》，也叫《幼學故事瓊林》。',
          'content': [
            {
              'title': '卷一',
              'content': [
                {
                  'chapter': '天文',
                  'paragraphs': [
                    '混沌初開，乾坤始奠。氣之輕清上浮者爲天，氣之重濁下凝者爲地。日月五星，謂之七政；天地與人，謂之三才。日爲衆陽之宗，月乃太陰之象。虹名螮蝀，乃天地之淫氣；月裏蟾蜍是月魄之精光。',
                    '風欲起而石燕飛，天將雨而商羊舞。旋風名爲羊角，閃電號曰雷鞭。青女乃霜之神，素娥即月之號。雷部至捷之鬼曰律令，雷部推車之女回阿香。雲師系是豐隆，雪神乃是滕六。歘火、謝仙，俱掌雷火；飛廉、箕伯，悉是風神。',
                    '列缺乃電之神，望舒是月之御。甘霖、甘澍，僅指時雨；玄穹、彼蒼，悉稱上天。雪花飛六出，先兆豐年；日上已三竿，乃雲時晏。蜀犬吠日，比人所見甚稀；吳牛喘月，笑人畏懼過甚。',
                    '望切者，若雲霓之望；恩深者，如雨露之恩。參商二星，其出沒不相見；牛女兩宿，惟七夕一相逢。后羿妻，奔月宮而爲嫦娥；傅說死，其精神託於箕尾。披星戴月，謂早夜之奔馳；沐雨櫛風，謂風塵之勞苦。事非有意，譬如雲出無心；恩可遍施，乃曰陽春有腳。',
                    '饋物致敬，曰敢效獻曝之忱；託人轉移，曰全賴回天之力。感救死之恩，曰再造；誦再生之德，曰二天。勢易盡者若冰山，事相懸者如天壤。晨星謂賢人廖落，雷同謂言語相符。心多過慮，何異杞人憂天；事不量力，不殊夸父追回。',
                    '如夏日之可畏，是謂趙盾；如冬日之可愛，是謂趙衰。齊婦含冤，三年不雨；鄒衍下獄，六月飛霜。父仇不共戴天，子道須當愛日。',
                    '盛世黎民，嬉遊於光天化日之下；太平天子，上召夫景星慶雲之祥。夏時大禹在位，上天雨金；春秋孝經既成，赤虹化玉。箕好風，畢好雨，比庶人願欲不同；風從虎，雲從龍，比君臣會合不偶。雨暘時若，系是休徵；天地交泰，稱斯盛世。'
                  ]
                },
                {
                  'chapter': '地輿',
                  'paragraphs': [
                    '黃帝畫野，始分都邑；夏禹治水，初奠山川。宇宙之江山不改，古今之稱謂各殊。北京原屬幽燕，金臺是其異號；南京原爲建業，金陵又是別名。浙江是武林之區，原爲越國；江西是豫章之地，又曰吳皋。福建省屬閩中，湖廣地名三楚。東魯西魯，即山東山西之分；東粵西粵，乃廣東廣西之域。河南在華夏之中，故曰中州；陝西即長安之地，原爲秦境。四川爲西蜀，雲南爲古滇。貴州省近蠻方，自古名爲黔地。',
                    '東嶽泰山，西嶽華山，南嶽衡山，北嶽恆山，中嶽嵩山，此爲天下之五嶽；饒州之鄱陽，嶽州之青草，潤州之丹陽，鄂州之洞庭，蘇州之太湖，此爲天下之五湖。',
                    '金城湯池，謂城池之鞏固；礪山帶河，乃封建之誓盟。帝都曰京師，故鄉曰梓里。蓬萊弱水，惟飛仙可渡；方壺員嶠，乃仙子所居。滄海桑田，謂世事之多變；河清海晏，兆天下之昇平。水神曰馮夷，又曰陽侯，火神曰祝融，又曰回祿。海神曰海若，海眼曰尾閭。',
                    '望人包容曰海涵，謝人思澤曰河潤。無繫累者曰江湖散人，負豪氣者曰湖海之士。問舍求田，原無大志；掀天揭地，方是奇才。憑空起事，謂之平地風波；獨立不移，謂之中流砥柱。黑子、彈丸，漫言至小之邑；咽喉、右臂，皆言要害之區。',
                    '獨立難持，曰一木焉能支大廈；英雄自恃，曰丸泥亦可封函關。事先敗而後成，曰失之東隅，收之桑榆；事將成而終止，曰爲山九仞，功虧一簣。以蠡測海，喻人之見小；精衛銜石，比人之徒勞。跋涉謂行路艱難，康莊謂道路平坦。磽地曰不毛之地，美田曰膏腴之田。',
                    '得物無所用，曰如獲石田；爲學己大成，日誕登道岸。淄澠之滋味可辨，涇渭之清濁當分。泌水樂飢，隱居不仕；東山高臥，謝職求安。聖人出則黃河清，太守廉則越石見。美俗曰仁裏，惡俗曰互鄉。里名勝母，曾子不入；邑號朝歌，墨翟回車。',
                    '擊壤而歌，堯帝黎民之自得；讓畔而耕，文王百姓之相推。費長房有縮地之方，秦始皇有鞭石之法。堯有九年之水患，湯有七年之旱災。商鞅不仁而阡陌開，夏桀無道而伊洛竭。道不拾遺，由在上有善政；海不揚波，知中國有聖人。'
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
        this.subDataMsg = this.dataMsg.content[0]
        this.idx = 0
      },
      idx () {
        this.subDataMsg = this.dataMsg.content[this.idx]
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
      this.idx = 0
    },
    methods: {
      changeUrl () {
        let url = null
        if (window.location.href.includes('#/youxueqionglin')) {
          url = '/mengxue/youxueqionglin.json'
        } else if (window.location.href.includes('#/qianjiashi')) {
          url = '/mengxue/qianjiashi.json'
        } else if (window.location.href.includes('#/guwenguanzhi')) {
          url = '/mengxue/guwenguanzhi.json'
        } else if (window.location.href.includes('#/shenglvqimeng')) {
          url = '/mengxue/shenglvqimeng.json'
        } else {
          return
        }
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      changeIndex (idx) {
        this.idx = idx
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
